<template>
  <div>
    <el-row>
      <el-form :inline="true">
        <el-form-item label="流程名称">
          <el-input v-model="data.processName" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="应用名称" style="width: 260px;">
          <el-select placeholder="选择应用">
            <el-option v-for="(item, index) in APP_LIST" :key="index" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">
            <el-icon>
              <Search />
            </el-icon>搜索
          </el-button>
          <el-button type="primary" @click="reset">
            <el-icon>
              <Refresh />
            </el-icon>重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
      <el-table :data="formFlow" stripe>
        <el-table-column align="center" type="index" label="序号" width="100px"></el-table-column>
        <el-table-column align="center" label="流程名称" prop="processName"></el-table-column>
        <el-table-column align="center" label="应用系统">
          <template #default="scope">
            {{ APP_LIST.find(item => item.code == scope.row.appName).name }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="备注" prop="remark"></el-table-column>
        <el-table-column align="center" label="创建时间" prop="createTime"></el-table-column>
        <el-table-column align="center" label="操作">
          <template #default="scope">
            <el-button type="primary" plain @click="startProcess(scope.row)">发起流程</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex; margin-left: auto; flex: flex-end;">
        <el-pagination layout="prev, pager, next" :total="formFlowPage.total" @current-change="changePage"
          hide-on-single-page>
        </el-pagination>
      </div>

    </el-row>
    <el-dialog title="发起流程" v-model="formVisible">
      <FormRenderer :formData="formContent.formData" :formModel="formContent.formModel"></FormRenderer>
      <div style="width: 100%;">
        <el-button type="primary" size="large" @click="submitProcess"
          style="display: block; margin:0 auto;">提交流程</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
// 发起流程
// 查询现有流程模板
import { getFormFlow, getForm } from '@/api/flowable/form'
import { APP_LIST } from '@/constants/appname';
const formFlow = ref([])
const formFlowPage = ref({
  page: 1,
  pageSize: 10,
  total: 0
})
const data = ref({
  id: '',
  processName: '',
  appName: '',
  status: '启用',
  page: formFlowPage.value.page,
  pageSize: formFlowPage.value.pageSize
})
async function doGetFormFlow() {
  console.log('查询表单')
  await getFormFlow(data.value).then(res => {
    console.log(res)
    formFlow.value = res.data.data.records
    formFlowPage.value.total = res.data.data.total
  })
}
doGetFormFlow()

async function search() {
  await doGetFormFlow()
}
function reset() {
  data.value = {
    id: '',
    processName: '',
    appName: '',
    status: '启用',
    page: formFlowPage.value.page,
    pageSize: formFlowPage.value.pageSize
  }
}
async function changePage(page) {
  data.value.page = page
  await doGetFormFlow()
}
// 获取表单内容
import FormRenderer from '@/components/formtool/components/formdesigner/FormRenderer.vue';
const formVisible = ref(false);
const formContent = ref({
  formData: {},
  formModel: {}
})
const flowId = ref('')
const keytolabelTemplate = ref({})
// 打开发起流程页面，获取表格
async function startProcess(row) {
  console.log(row)
  flowId.value = row.flowId
  await getForm(row.formId).then(res => {
    formContent.value.formData = JSON.parse(res.data.data.formContent)
    let formModel = {}
    formContent.value.formData.controls.forEach(control => {
      if (control.props.defaultValue !== undefined) {
        formModel[control.id] = control.props.defaultValue
        keytolabelTemplate.value[control.id] = control.props.label
      }
    })
    formContent.value.formModel = formModel
  })
  formVisible.value = true
}
import { submitInstance } from '@/api/flowable/instance'
import { ElMessage } from 'element-plus';
const isStartProcess = defineModel("isStartProcess")
async function submitProcess() {
  // 重命名变量，key明晰语义
  const renameVariables = {}
  for (let key in formContent.value.formModel) {
    let value = formContent.value.formModel[key]
    renameVariables[keytolabelTemplate.value[key]] = value
  }
  console.log(renameVariables)
  await submitInstance(flowId.value, renameVariables).then(res => {
    console.log(res)
    ElMessage.success("流程发起成功")
    formVisible.value = false
    isStartProcess.value = false
  })
}
</script>
<style lang="less" scoped>
.el-icon {
  margin-right: 8px;
}
</style>